<template>
	<view class="scenic-content" @click="navigateTo(`/pagesA/scenic_detail/index?id=${datas.spot_id}`)">
		<image class="scenic-img" :src="ossurl(datas.face)" mode=""></image>
		<view class="scenic-info">
			<view class="scenic-title">{{ datas.title }}</view>
			<view class="scenic-brief">{{ datas.description }}</view>
		</view>
	</view>
</template>

<script>
	import { navigateTo, navigateBack } from '@/hooks';
	import { ossurl } from '@/utils/index';
	export default {
		data() {
			return {
				navigateTo,
				info: {},
			};
		},
		props: {
			// 开启动画
			datas: {
				type: Object,
				default: {},
			},
		},
		methods: {
			ossurl,
		},
	};
</script>

<style lang="scss">
	.scenic-content {
		min-height: 168rpx;
		padding: 16rpx;
		margin-top: 24rpx;
		display: flex;
		background-color: #fff;
		border-radius: 24rpx;

		.scenic-img {
			width: 260rpx;
			height: 168rpx;
			margin-right: 24rpx;
			border-radius: 12rpx;
		}
		.scenic-info {
			flex: 1;
			.scenic-title {
				font-weight: 700;
				font-size: 30rpx;
				color: #3d3d3d;
			}
			.scenic-brief {
				margin-top: 12rpx;
				font-weight: 400;
				font-size: 26rpx;
				color: #666666;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}
	}
</style>
